import {Image, StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import {Stack, useLocalSearchParams, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useState} from "react";
import avator from '@/assets/images/me/avator.png'
import {useActionSheet} from "@expo/react-native-action-sheet";
import PuppModal from "@/components/pupoModal"
import {
    getCoummunityManagePeddingListByRequest,
    postApprovalJoinCommunityByRequest,
    postRejectJoinCommunityByRequest,
    getJoinGroupList,
    postKillGroupMember
} from "@/services/registerCommumity"
import {loadingService} from "@/utils/loadingServer";
import Empty from "@/components/empty";
import {showToast} from "@/utils/rootToast";


export default function memberAdminScreen() {

    const router = useRouter();
    const routerParms = useLocalSearchParams();

    const [active, setActive] = useState(0);
    const [showReject, setShowReject] = useState(false);
    const [showResolve, setShowResolve] = useState(false);
    const [auditList, setAuditList] = useState([]);
    const [tmpUserId, setTmpUserId] = useState('');
    const [joinList, setJoinList] = useState([])

    const { showActionSheetWithOptions } = useActionSheet();
    const options = ['请TA退出社群', '取消'];


    useEffect(() => {
        getList();
        getJoinList();
    }, [])

    const getList = function () {
        getCoummunityManagePeddingListByRequest({ communityId: routerParms.groupId })
            .then(res => {
                console.log('res', res.data?.communityUsers);
                setAuditList(res?.data?.communityUsers);

            })
            .catch(err => {
                console.log('err', err);
            })
    };

    const getJoinList = function () {
        getJoinGroupList({ communityId: routerParms.groupId })
            .then(res => {
                console.log('getJoinList', res);
                setJoinList(res?.data?.communityUsers);
            })
            .catch(err => {
                console.log('err', err);
            })
    };

    const openActionSheet = (memberUid) => {
        const cancelButtonIndex = 1;

        showActionSheetWithOptions(
            {
                options,
                cancelButtonIndex,
            },
            (buttonIndex) => {
                switch (buttonIndex) {
                    case 0:
                        console.log('请TA退出社群');
                        const data = {
                            "communityId": routerParms.groupId,
                            "memberUid": memberUid,
                        };
                        console.log('data', data);
                        postKillGroupMember(data)
                            .then(res => {
                                showToast("踢x出社群成功！");
                                getJoinList();
                                console.log('res', res);
                            })
                            .catch(err => {
                                console.log('err', err);
                            })
                        break;
                    default:
                        break;
                }
            }
        );
    };

    const approval = function () {
        setShowResolve(false);
        loadingService.show();
        const data = {
            communityId: routerParms.groupId,
            approvedUid: tmpUserId,
        };
        console.log('datadata', data);
        postApprovalJoinCommunityByRequest(data)
            .then(res => {
                console.log('res', res);
                setShowReject(false);
                getList();
                loadingService.hide();
            })
            .catch(err => {
                loadingService.hide();
                setShowReject(false);
                console.log('err', err);
            })
    };

    const rejectMember = function () {
        // setShowResolve(false)
        const data = {
            communityId: routerParms.groupId,
            rejectedUid: tmpUserId,
        };
        console.log('datadata', data);
        postRejectJoinCommunityByRequest(data)
            .then(res => {
                console.log('res', res);
                setShowResolve(false)
                getList();
                getJoinList();
                loadingService.hide();
            })
            .catch(err => {
                loadingService.hide();
                setShowResolve(false)
                console.log('err', err);
            })
    };

    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '成员管理', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#FFF', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
           <View style={styles.createTicketContainer}>
               <View style={styles.createTicketHeader}>
                   <TouchableOpacity onPress={() => setActive(0)}>
                       <View style={[ active == 0 ? styles.headerItem : "" ]}>
                           <Text style={[ active == 0 ? styles.activeColor : "" ]}>
                               审核成员
                           </Text>
                       </View>
                   </TouchableOpacity>
                   <TouchableOpacity onPress={() => setActive(1)}>
                       <View style={[ active == 1 ? styles.headerItem : "" ]}>
                           <Text style={[ active == 1 ? styles.activeColor : "" ]} >
                               成员管理
                           </Text>
                       </View>
                   </TouchableOpacity>
               </View>
               <View style={styles.memberContainer}>
                   {
                       active == 0 && (
                           <>
                               {
                                   auditList.map((item: any, index: number) => {
                                       return (
                                           <View style={styles.examItem} key={index}>
                                               <View style={styles.avator}>
                                                   <Image source={avator} style={{ width: "100%", height: "100%" }} />
                                               </View>
                                               <View style={styles.examItemContent}>
                                                   <View style={styles.examHeaderTitle}>
                                                       <Text style={styles.examHeaderTitleText}>{ item?.nickname }</Text>
                                                   </View>
                                                   <View style={styles.examHeaderContent}>
                                                       <Text style={styles.examHeaderContentText}>{ item?.introduction }</Text>
                                                   </View>
                                               </View>
                                               {
                                                   true && (
                                                       <View style={styles.examItemBtnWrap}>
                                                           <TouchableOpacity onPress={() => {
                                                               setShowResolve(true);
                                                               setTmpUserId(item?.uid);
                                                           }}>
                                                               <View style={styles.reject}>
                                                                   <Text style={styles.rejectText}>拒绝</Text>
                                                               </View>
                                                           </TouchableOpacity>
                                                           <TouchableOpacity onPress={() => {
                                                               setShowReject(true);
                                                               setTmpUserId(item?.uid);
                                                           }}>
                                                               <View style={styles.acctep}>
                                                                   <Text style={styles.acctepText}>通过</Text>
                                                               </View>
                                                           </TouchableOpacity>
                                                       </View>
                                                   )
                                               }

                                               {/*{*/}
                                               {/*    true && (*/}
                                               {/*        <View style={styles.rejectStatus}>*/}
                                               {/*            <Text style={styles.examItemBtnWrapText}>已拒绝</Text>*/}
                                               {/*        </View>*/}
                                               {/*    )*/}
                                               {/*}*/}

                                               {/*{*/}
                                               {/*    false && (*/}
                                               {/*        <View style={styles.rejectStatus}>*/}
                                               {/*            <Text style={styles.examItemBtnWrapText}>已通过</Text>*/}
                                               {/*        </View>*/}
                                               {/*    )*/}
                                               {/*}*/}
                                           </View>
                                       )
                                   })
                               }
                               {
                                   auditList.length <= 0 && (
                                       <Empty/>
                                   )
                               }
                           </>
                       )
                   }

                   {
                       active == 1 && (
                           <>
                               {
                                   joinList?.map((item: any, index: number) => {
                                       return (
                                           <View style={styles.examItem} key={index}>
                                               <View style={styles.avator}>
                                                   <Image source={{ uri: item?.avatarUrl }} style={{ width: "100%", height: "100%" }} />
                                               </View>
                                               <View style={[styles.examItemContent, { width: 240, paddingTop: 0, }]}>
                                                   <View style={styles.examHeaderTitle}>
                                                       <Text style={styles.examHeaderTitleText}>{ item?.nickname }</Text>
                                                   </View>
                                               </View>
                                               <View style={styles.examItemBtnWrap}>
                                                   <TouchableOpacity onPress={() => {
                                                       openActionSheet(item?.uid);
                                                       setTmpUserId(item?.uid)
                                                   }}>
                                                       <View style={styles.acctep}>
                                                           <Text style={styles.acctepText}>管理</Text>
                                                       </View>
                                                   </TouchableOpacity>
                                               </View>
                                           </View>
                                       )
                                   })
                               }
                               {
                                   !joinList || joinList?.length == 0 && (
                                       <Empty/>
                                   )
                               }

                           </>
                       )
                   }

               </View>
           </View>
            <PuppModal
                visible={showReject}
                title="通过"
                okCancel={() => setShowReject(false)}
                onOk={approval}
            >
                <View style={styles.rejectModal}>
                    <Text style={styles.rejectText}>确认通过成员加入该社群</Text>
                </View>
            </PuppModal>

            <PuppModal
                visible={showResolve}
                title="拒绝"
                okCancel={() => setShowResolve(false)}
                onOk={rejectMember}
            >
                <View style={styles.rejectModal}>
                    <Text style={styles.rejectText}>确认拒绝成员加入该群</Text>
                </View>
            </PuppModal>
        </View>

    );
}

const styles = StyleSheet.create({
    createTicketContainer: {
        flex:1,
    },
    createTicketHeader: {
        flexDirection: "row",
        backgroundColor: "#fff",
        paddingHorizontal: 100,
        justifyContent: "space-between",
    },
    headerItem: {
        borderBottomWidth: 3,
        paddingBottom: 2,
        borderColor: "#EC6138",
        borderRadius: 1,
    },
    activeColor: {
        color: "#EC6138"
    },
    memberContainer: {
        padding: 12,
    },
    examItem: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: 20,
    },
    avator: {
        width: 46,
        height: 46,
        borderRadius: 50,
        overflow: "hidden",
    },
    examItemContent: {
        marginLeft: 10,
        width: 180,
        paddingTop: 7,
    },
    examItemBtnWrap: {
        flex: 1,
        flexDirection: "row",

    },
    examHeaderTitle: {

    },
    examHeaderTitleText: {
        fontSize: 16,
    },
    examHeaderContent: {

    },
    examHeaderContentText: {
        fontSize: 14,
        color: "#9C9EAC",
        marginTop: 6,
    },
    reject: {
        paddingVertical: 7,
        paddingHorizontal: 16,
        borderWidth: 0.5,
        borderColor: "#C0C3CE",
        borderRadius: 15,
    },
    rejectText: {
        fontSize: 14,
    },
    acctep: {
        paddingVertical: 7,
        paddingHorizontal: 16,
        borderWidth: 0.5,
        borderColor: "#EC6138",
        borderRadius: 15,
        backgroundColor: "#EC6138",
        marginLeft: 10
    },
    acctepText: {
        fontSize: 14,
        color: "#fff",
    },
    rejectModal: {
        marginBottom: 34,
        marginTop: 14,
    },
    rejectText: {
        textAlign: "center",
        fontSize: 16,
        color: "#676978"
    },
    examItemBtnWrapText: {
        color: "#676978",
    },
    rejectStatus: {
        flexDirection: "row",
        justifyContent: "flex-end",
        flex: 1,
    },
});
